<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,ul{margin: 0;padding: 0;}
	li{list-style: none;}
	img{border: none;vertical-align: top;}
	#box{width: 524px;height:414px;border: 1px solid #000;margin: 30px auto 0;position: relative; overflow: hidden;}
	#mark_left,#mark_right{width: 262px;height: 306px;position: absolute;top: 0;z-index:3000;filter:alpha(opacity:0); opacity: 0;}
	#mark_left{left: 0;}
	#mark_right{left: 262px;}
	#prev,#next{width:50px;height:50px; line-height: 50px;text-align: center;color: #fff;text-decoration:none;font-size:14px;position: absolute;top: 150px;background-color: #747474;z-index:3001;opacity: 0;filter:alpha(opacity:0);}
	#prev{left: 0;}
	#next{left: 474px;}
	/* #big_pic{width:524px;height: 306px;} */
	#big_pic li{/* width:524px;height:306px; */position: absolute;z-index: 0;overflow: hidden;}
	#big_pic img{width: 524px;height: 306px;}

	#small_pic{height: 104px;position: absolute;top:310px;left: 0;padding-left: 2px;}
	#small_pic li{float: left;padding: 0 2px; opacity: 0.3;filter:alpha(opacity:30);}
	#small_pic img{width: 100px;height: 100px;cursor: pointer;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oBig = document.getElementById('big_pic');
		var aBli = oBig.getElementsByTagName('li');
		var oSmall = document.getElementById('small_pic');
		var aSli = oSmall.getElementsByTagName('li');
		var oMarkLeft = document.getElementById('mark_left');
		var oMarkRight = document.getElementById('mark_right');
		var oPrev = document.getElementById('prev');
		var oNext = document.getElementById('next');
		var minZindex = 1;
		var iNow = 0;
		var timer = null;
		
		//小图列表自适应宽度
		oSmall.style.width = aSli.length*aSli[0].offsetWidth + 'px';
		//alert(oSmall.style.width)	//624px;
		aSli[0].style.opacity = 100;
		aSli[0].style.filter = 'alpha(opacity:100)';

		oPrev.onmouseover= oMarkLeft.onmouseover = function (){
			oPrev.style.display = 'block';
			doMove(oPrev, 'opacity', 100);
		}
		oPrev.onmouseout= oMarkLeft.onmouseout = function (){
			oPrev.style.display = 'none';
			doMove(oPrev, 'opacity', 0);
		}

		oNext.onmouseover = oMarkRight.onmouseover = function (){
			oNext.style.display = 'block';
			doMove(oNext, 'opacity', 100);	
		}
		oNext.onmouseout = oMarkRight.onmouseout = function (){
			oNext.style.display = 'none';
			doMove(oNext, 'opacity', 0);
		}

		//小图自身效果
		for (var i = 0; i < aSli.length; i++) {
			aSli[i].index = i;

			aSli[i].onmouseover = function (){
				doMove(this, 'opacity', 100);
			}
			aSli[i].onmouseout = function (){
				if (this.index == iNow) return;
				doMove(this, 'opacity', 30);
			}

			//小图点击，大图切换
			aSli[i].onclick = function (){
				if(this.index == iNow) return;
				iNow = this.index;
				tab();
			}
		};

		oPrev.onclick = function (){
			iNow --;
			if (iNow == -1) {
				iNow = aSli.length-1;
			}
			tab();
		}
		oNext.onclick = function (){
			iNow ++;
			if (iNow == aSli.length) {
				iNow = 0;
			}
			tab();
		}

		function tab(){
			//小图鼠标移入
			for (var i = 0; i < aSli.length; i++) {
				doMove(aSli[i], 'opacity', 30);
			};
			doMove(aSli[iNow], 'opacity', 100);

			//大图显示
			aBli[iNow].style.zIndex = minZindex ++;
			aBli[iNow].style.height = '0';			//需要搭配overflow：hidden
			doMove(aBli[iNow], 'height', 320 );

			//小图列表移动
			if (iNow > 2) {
				doMove(oSmall, 'left', -aSli[0].offsetWidth);
			} else{
				doMove(oSmall, 'left', 0);
			};
		}
	}

	function doMove(obj, attr, target){
		clearInterval(obj.timer);
		obj.timer = setInterval(function (){
			var iCur = 0;
			if (attr == 'opacity') {
				iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
			} else{
				iCur = parseInt(getStyle(obj, attr));
			};

			var speed = (target - iCur)/8;
			speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

			if (iCur == target) {
				clearInterval(obj.timer);
			} else{
				if (attr == 'opacity') {
					obj.style.opacity = (iCur + speed)/100;
					obj.style.filter = 'alpha(opacity:'+ (iCur + speed) +')';
				} else{
					obj.style[attr] = iCur + speed + 'px';
				}; 
			};
		},30)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="box" class="clear">
		<a id="mark_left" href="javascript:;"></a>
		<a id="mark_right" href="javascript:;"></a>

		<a id="prev" href="javascript:;">上一张</a>
		<a id="next" href="javascript:;">下一张</a>
		<ul id="big_pic">
			<li style="z-index:1;"><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="5.jpg"></li>
			<li><img src="6.jpg"></li>
		</ul>
		<ul id="small_pic"> 
			<li><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="5.jpg"></li>
			<li><img src="6.jpg"></li>
		</ul>
	</div>
</body>
</html>